import React, { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useImmer } from 'use-immer'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { SpFloatLayout, SpCheckbox } from '@/components'
import api from '@/api'
import { isWeixin, isWxWeb, isWeb, getDistributorId, isAPP, pickBy, VERSION_IN_PURCHASE, isAlipay } from '@/utils'
import doc from '@/doc'
import { payment_platform } from '@/utils/platform'
import './index.scss'

const paymentList = [
  {
    paymentChannel: 'deposit',
    paymentCode: 'deposit',
    paymentName: '余额支付'
  }
]

const initialState = {
  list: [],
  selectPayment: '',
  selectItem: null
}

function SpCashier(props) {
  const {
    isOpened = true,
    value,
    onClose = () => { },
    onChange = () => { },
    paymentAmount = 0
  } = props
  const $instance = getCurrentInstance()
  const { userInfo } = useSelector((state) => state.user)
  const [state, setState] = useImmer(initialState)
  const { list, selectPayment, selectItem } = state
  const ENV = Taro.getEnv()
  useEffect(() => {
    // if (isAPP()) {
    //   fetchAppPaymentList()
    // } else {
    //   fetchPaymentList()
    // }
    fetchPaymentList()
  }, [ENV])

  useEffect(() => {
    if (!isOpened) {
      setState((draft) => {
        draft.selectPayment = value
      })
    }
  }, [value, isOpened])

  const fetchPaymentList = async () => {
    let platform = ''
    if (isWxWeb) {
      platform = 'wxPlatform'
    } else if (isWeixin) {
      platform = 'wxMiniProgram'
    } else if (isAPP()) {
      platform = 'app'
    } else if (isAlipay) {
      platform = 'alipaymini'
    } else if (isWeb) {
      platform = 'h5'
    }
    const { shop_id } = $instance.router.params
    const params = {
      distributor_id: getDistributorId(shop_id),
      platform
    }
    const res = await api.member.getTradePaymentList(params)
    const list = pickBy(res, doc.payment.PAYMENT_ITEM)

    if (isAPP()) {
      const resAppPayment = await Taro.SAPPPay.getPayList()
      const appPaymentlist = pickBy(resAppPayment, doc.payment.APP_PAYMENT_ITEM)

    }
    let _list = list
    if (process.env.NODE_ENV === 'development') {
      _list = list.concat(paymentList)
    }

    setState((draft) => {
      draft.list = _list
    })
    if (_list.length > 0) {
      onChange(_list[0])
      onChangePayment(_list[0])
    }


    // const isHasAlipay = list.some((item) => item.pay_type_code === 'alipayh5')
    // return {
    //   list,
    //   isHasAlipay
    // }
  }

  const fetchAppPaymentList = async () => {
    const res = await Taro.SAPPPay.getPayList()
    const list = pickBy(res, doc.payment.APP_PAYMENT_ITEM)
    if (process.env.NODE_ENV === 'development') {
      list.concat(paymentList)
    }
    setState((draft) => {
      draft.list = list
    })
    onChange(list[0])
    onChangePayment(list[0])
  }

  const onChangePayment = (item) => {
    const { paymentCode, paymentChannel } = item
    setState((draft) => {
      draft.selectPayment = paymentChannel
      draft.selectItem = item
    })
  }

  const onConfirm = () => {
    onClose()
    onChange(selectItem)
  }

  const onCloseFloatLayout = () => {
    setState((draft) => {
      draft.selectPayment = value
    })
    onClose()
  }

  const renderPaymentName = ({ paymentCode, paymentName }) => {
    if (paymentCode == 'deposit') {
      return `${paymentName} (余额: ${userInfo.deposit || 0})`
    } else {
      return paymentName
    }
  }

  return (
    <SpFloatLayout
      title='支付方式'
      className='sp-cashier'
      open={isOpened}
      onClose={onCloseFloatLayout}
      renderFooter={
        <AtButton circle type='primary' onClick={onConfirm}>
          确定
        </AtButton>
      }
    >
      <View>
        {list.map((item, index) => (
          <View className='payment-item' key={`payment-item__${index}`}>
            <SpCheckbox
              checked={item.paymentChannel == selectPayment}
              onChange={onChangePayment.bind(this, item)}
            // disabled={onDisabled(item)}
            >
              {renderPaymentName(item)}
            </SpCheckbox>
          </View>
        ))}
      </View>
    </SpFloatLayout>
  )
}

SpCashier.options = {
  addGlobalClass: true
}

export default SpCashier
